<template>
	<view class="goods-detail">
		<!-- 轮播图 -->
		<GoodsSwiper id="main1" :res="goods.images" />

		<!-- 商品基本信息 -->
		<view class="goods-basic-info">
			<view class="goods-header">
				<view class="goods-title">{{goods.name}}</view>
				<view class="goods-desc">{{goods.description}}</view>
			</view>
			<view class="goods-price-section">
				<view class="price-info">
					<text class="current-price">￥{{ goods.price}}</text>
					<text class="original-price"
						v-if="goods.isSpecialOffer && goods.originalPrice > (goods.displayPrice || goods.currentPrice || goods.price)">
						￥{{goods.originalPrice}}
					</text>
					<view class="discount-badge" v-if="goods.isSpecialOffer">
						<text class="discount-text">特价</text>
					</view>
				</view>
				<view class="quantity-control">
					<cc-numbox @change="numChangeClick" :maxNum="goods.stock" :isSetMax="true"
						:quantity="goods.cartQuantity||1"></cc-numbox>
				</view>
			</view>
		</view>

		<!-- 店铺信息 -->
		<view class="shop-info-card">
			<view class="shop-header">
				<view class="shop-details">
					<text class="shop-name">{{goods.shop.name}}</text>
					<text class="shop-address">{{goods.shop.address || '暂无地址信息'}}</text>
				</view>
				<view class="shop-arrow">
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>

		<!-- 商品规格 -->
		<view class="specifications-card" v-if="goods.specifications && goods.specifications.length > 0">
			<view class="spec-header">
				<text class="spec-title">商品规格</text>
			</view>
			<view class="spec-list">
				<view class="spec-item" v-for="(item, index) in goods.specifications" :key="index">
					<view class="spec-label">{{item.name}}</view>
					<view class="spec-value">{{item.value}}</view>
				</view>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="goods-detail-card" v-if="goods.detail">
			<view class="detail-header">
				<text class="detail-title">商品详情</text>
			</view>
			<view class="detail-content">
				<rich-text :nodes="goods.detail"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsSwiper from "@/pages/homePages/samComponents/--product--siwper"; //轮播图组件
	export default {
		props: ['goods'],
		components: {
			GoodsSwiper
		},
		data() {
			return {
				imageUrl: [
					'https://img1.baidu.com/it/u=3334840423,2903795201&fm=253&fmt=auto&app=120&f=JPEG?w=810&h=500'
				],
				specifications: {
					title: '规格参数',
				}
			};
		},

		methods: {
			numChangeClick(data) {
				this.$emit('addNum', data.num)
			},
			//计算单个商品价格
			finalPrice(goodsItem) {
				// 优先使用 currentPrice 字段进行计算
				const basePrice = goodsItem.currentPrice || goodsItem.price;

				if (!goodsItem.isSpecialOffer) {
					return basePrice.toFixed(2); // 普通商品直接显示
				}

				// 特价商品计算逻辑
				const discount = goodsItem.specialOfferInfo.discountRate * 0.1;
				return (basePrice * discount).toFixed(2);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goods-detail {
		background: #f8f9fa;
		min-height: 100vh;
	}

	// 商品基本信息
	.goods-basic-info {
		background: white;
		margin: 24rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

		.goods-header {
			padding: 32rpx 24rpx 24rpx;
			border-bottom: 1px solid #f0f0f0;

			.goods-title {
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
				line-height: 1.4;
				margin-bottom: 16rpx;
			}

			.goods-desc {
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
			}
		}

		.goods-price-section {
			padding: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.price-info {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.current-price {
					font-size: 48rpx;
					font-weight: 700;
					color: #FF2E44;
				}

				.original-price {
					font-size: 28rpx;
					color: #999;
					text-decoration: line-through;
				}

				.discount-badge {
					background: linear-gradient(135deg, #FF4D4F 0%, #FF7875 100%);
					border-radius: 20rpx;
					padding: 8rpx 16rpx;

					.discount-text {
						color: white;
						font-size: 24rpx;
						font-weight: 600;
					}
				}
			}

			.quantity-control {
				// 数量控制器样式
			}
		}
	}

	// 店铺信息
	.shop-info-card {
		background: white;
		margin: 0 24rpx 24rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

		.shop-header {
			display: flex;
			align-items: center;
			padding: 24rpx;

			.shop-details {
				flex: 1;

				.shop-name {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
					display: block;
					margin-bottom: 8rpx;
				}

				.shop-address {
					font-size: 26rpx;
					color: #666;
					display: block;
				}
			}

			.shop-arrow {
				color: #999;
				font-size: 24rpx;
			}
		}
	}

	// 商品规格
	.specifications-card {
		background: white;
		margin: 0 24rpx 24rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

		.spec-header {
			padding: 24rpx 24rpx 16rpx;
			border-bottom: 1px solid #f0f0f0;

			.spec-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
		}

		.spec-list {
			.spec-item {
				display: flex;
				align-items: center;
				padding: 20rpx 24rpx;
				border-bottom: 1px solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.spec-label {
					width: 160rpx;
					font-size: 28rpx;
					color: #666;
					font-weight: 500;
				}

				.spec-value {
					flex: 1;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}

	// 商品详情
	.goods-detail-card {
		background: white;
		margin: 0 24rpx 24rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

		.detail-header {
			padding: 24rpx 24rpx 16rpx;
			border-bottom: 1px solid #f0f0f0;

			.detail-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
		}

		.detail-content {
			padding: 24rpx;

			rich-text {
				font-size: 28rpx;
				line-height: 1.6;
				color: #333;
			}
		}
	}

	// 兼容旧样式
	.goods_title {
		font-weight: 700;
		font-size: 32rpx;
		color: #000;
		line-height: 40rpx;
	}

	.goods_pire {
		margin-top: 20rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #FF2E44;
		line-height: 46rpx;
	}

	.goods_tip_label,
	.goods_tip_text {
		font-weight: 400;
		font-size: 28rpx;
		color: #555C67;
		line-height: 40rpx;
	}

	.goods_tip_label {
		font-weight: 700;
		width: 20%;
	}

	.goods_tip_title {
		margin-bottom: 20rpx;
		font-weight: 700;
		font-size: 28rpx;
		color: #000;
		line-height: 40rpx;
	}
</style>